<!DOCTYPE html>
<html>
<head>
<script src="../../resources/dump-as-markup.js"></script>
</head>
<body>
<div contentEditable id="first">
    <ol>
        <li id="listItemBlock">before<div>div1</div><div>div2</div><div>div3</div>after</li>
        <li id="listItemInline">before<span>span1</span><span>span2</span><span>span3</span>after</li>
        <li id="listItemTable">before<table border="1" cellpadding="2" cellspacing="2"><tr><td><br/></td></tr></table>after</li>
    </ol>
</div>
<div contentEditable id="second">
<ol>
<pre><ul><li id="listItemPre">hello
world</li>
</ul></pre>
</ol>
</div>
<script>
Markup.waitUntilDone();

function indentListItem(item) {
    window.getSelection().collapse(item, 0);
    document.execCommand("indent");
}

Array.prototype.slice.call(document.getElementsByTagName('li')).forEach(indentListItem);
Markup.dump(document.getElementById('first'), "Indent With Children");
Markup.dump(document.getElementById('second'), "Indent With Pre");

Markup.notifyDone();
</script>
</body>
</html>
